<template>
  <el-row :gutter="20" class="m-t-5px">
    <!-- 注意：如果不进行操作数组，使用index当key没有问题，若是数组会用来增删改查则不能使用index当key。 -->
    <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card
        class="rounded-md dark:bg-black"
        shadow="hover"
        style="height: 194px"
      >
        <div class="flex justify-between">
          <span class="card-panel-text">采购订单数(产品+配件)</span>
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <!-- <CountTo
            :startVal="0"
            :endVal="item.value1"
            :duration="2000"
          ></CountTo> -->
          <span class="card-panel-num">{{ itemData.purOrderQuantity }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text">采购订单未完结数</span>
          <span
            ><span
              class="text"
              @click="handleSetLineChartData('采购订单未完结数')"
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
              "
              >{{ itemData.unPurOrderQuantity }}</span
            ></span
          >
        </div>
      </el-card>
    </el-col>
    <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card
        class="rounded-md dark:bg-black"
        shadow="hover"
        style="height: 194px"
      >
        <div class="flex justify-between">
          <span class="card-panel-text">产品合同总数</span>
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <!-- <CountTo
            :startVal="0"
            :endVal="item.value1"
            :duration="2000"
          ></CountTo> -->
          <span class="card-panel-num">{{ itemData.contractQuantity }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text">合同未完结数</span>
          <span
            ><span
              class="text"
              @click="handleSetLineChartData('合同未完结数')"
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
              "
              >{{ itemData.unContractQuantity }}</span
            ></span
          >
        </div>
      </el-card>
    </el-col>
    <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">已入库sku件数</span>
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <!-- <CountTo
            :startVal="0"
            :endVal="item.value1"
            :duration="2000"
          ></CountTo> -->
          <span class="card-panel-num">{{ itemData.skuStorageQuantity }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text">超入库sku件数</span>
          <span
            ><span
              class="text"
              @click="handleSetLineChartData('超入库sku件数')"
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
              "
              >{{ itemData.overOrderReceivedQuantity }}</span
            ></span
          >
        </div>
        <div class="flex justify-between">
          <span class="text">待入库sku件数</span>
          <span
            ><span
              class="text"
              @click="handleSetLineChartData('待入库sku件数')"
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
              "
              >{{ itemData.unSkuStorageQuantity }}</span
            ></span
          >
        </div>
      </el-card>
    </el-col>

    <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">应交sku总件数</span>
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <!-- <CountTo
            :startVal="0"
            :endVal="item.value1"
            :duration="2000"
          ></CountTo> -->
          <span class="card-panel-num">{{ itemData.skuAllQuantity }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span>交货逾期待交付数</span>
          <span
            ><span
              @click="handleSetLineChartData('交货逾期待交付数')"
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
              "
              >{{ itemData.overdueUnDeliveryQuantity }}</span
            ></span
          >
        </div>
        <div class="flex justify-between">
          <span>采购完结未交付数</span>
          <span
            ><span
              @click="handleSetLineChartData('采购完结未交付数')"
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
              "
              >{{ itemData.purUnDeliveryQuantity }}</span
            ></span
          >
        </div>
      </el-card>
    </el-col>
    <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card
        class="rounded-md dark:bg-black"
        shadow="hover"
        style="height: 194px"
      >
        <div class="flex justify-between">
          <span class="card-panel-text">质检退货sku件数</span>
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <!-- <CountTo
            :startVal="0"
            :endVal="item.value1"
            :duration="2000"
          ></CountTo> -->
          <span class="card-panel-num">{{ itemData.returnQuantity }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text">不合格率</span>
          <span
            ><span class="text">{{
              itemData.fractionDefective + "%"
            }}</span></span
          >
        </div>
      </el-card>
    </el-col>
    <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card
        class="rounded-md dark:bg-black"
        shadow="hover"
        style="height: 194px"
      >
        <div class="flex justify-between">
          <span class="card-panel-text">质检退货品返仓件数</span>
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <!-- <CountTo
            :startVal="0"
            :endVal="item.value1"
            :duration="2000"
          ></CountTo> -->
          <span class="card-panel-num">{{
            itemData.repairedReturnedCount
          }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text">预估损耗件数</span>
          <span
            ><span
              class="text"
              @click="handleSetLineChartData('预估损耗件数')"
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
              "
              >{{ itemData.estimatedLossQuantity }}</span
            ></span
          >
        </div>
      </el-card>
    </el-col>
    <el-dialog
      title="关联采购单信息"
      :visible.sync="isOpen"
      width="80%"
      v-if="isOpen"
    >
      <el-row class="mb8" :gutter="10">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handlePurchaseExport"
            >导出
          </el-button>
        </el-col>
      </el-row>

      <el-table :data="PurchaseBasicsDwdList" :height="600">
        <el-table-column
          fixed
          width="120"
          label="下单日期"
          align="center"
          prop="dataDate"
        ></el-table-column>
        <el-table-column fixed label="品牌" align="center" prop="brand" />
        <el-table-column fixed label="供应商" align="center" prop="supplier" />
        <el-table-column
          fixed
          width="120"
          label="合同号"
          align="center"
          prop="contractNumber"
        />
        <el-table-column
          fixed
          label="采购单号"
          align="center"
          prop="purchaseOrderNumber"
        />
        <!-- <el-table-column
          width="120"
          fixed
          label="产品款号"
          align="center"
          prop="spu"
        />
        <el-table-column
          fixed
          label="颜色"
          align="center"
          prop="colorProperty"
        /> -->
        <el-table-column
          width="140"
          fixed
          label="sku"
          align="center"
          prop="sku"
        />
        <!-- <el-table-column
          align="center"
          prop="firstLevelColumn"
          label="一级类目"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="secondLevelColumn"
          label="二级类目"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="threeLevelColumn"
          label="三级类目"
        >
        </el-table-column>
        <el-table-column label="新品/老品" align="center" prop="isNewProduct" /> -->
        <el-table-column
          align="center"
          prop="contractType"
          label="类型"
        ></el-table-column>
        <el-table-column
          label="协议到货日期"
          align="center"
          prop="contractDeliveryDate"
          width="120"
        >
          <template slot-scope="scope">
            <span>{{
              parseTime(scope.row.contractDeliveryDate, "{y}-{m}-{d}")
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="下单数量" align="center" prop="orderQuantity" />
        <el-table-column
          label="外部订单号"
          align="center"
          prop="externalOrderNumber"
        />
        <el-table-column label="损耗件数" align="center" prop="lossQuantity" />

        <el-table-column
          label="合同采购价(元)"
          align="center"
          prop="contractPurchasePrice"
        />
        <el-table-column
          label="合同采购金额(元)"
          align="center"
          prop="contractAmount"
        />
        <el-table-column label="是否含税" align="center" prop="isTaxIncluded" />

        <el-table-column
          label="单件附加费用(元)"
          align="center"
          prop="additionalCostPerUnit"
        />
        <el-table-column
          label="订单附加费用(元)"
          align="center"
          prop="orderAdditionalCost"
        />
        <el-table-column
          label="附加费用说明"
          align="center"
          prop="additionalCostDescription"
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.fabricComposition }}</span> -->
              <el-input
                v-model="scope.row.additionalCostDescription"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname">
                  {{ scope.row.additionalCostDescription }}
                </span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          width="150"
          label="成本裸价(元)（含税）"
          align="center"
          prop="costPriceIncludingTax"
        />
        <el-table-column
          width="150"
          label="成本裸价(元)(不含税)"
          align="center"
          prop="costPriceExcludingTax"
        />
        <el-table-column
          label="已入库数量"
          align="center"
          prop="quantityReceived"
        />
        <!-- <el-table-column
          width="150"
          label="是否准交"
          align="center"
          prop="isOverdue30Days"
        /> -->
        <el-table-column
          label="协议日期内已交货数量"
          align="center"
          prop="overdueQuantity30Days"
        />
        <el-table-column
          label="逾期未交付"
          align="center"
          prop="currentDelayQuantity"
        />

        <el-table-column
          label="逾期己交货数"
          align="center"
          prop="overdueDeliveryQuantity"
        />
        <el-table-column
          label="交付完成率 "
          align="center"
          prop="overdueRateStr"
        >
        </el-table-column>
        <el-table-column label="收货状态" align="center" prop="receiptStatus" />
        <el-table-column label="订单状态" align="center" prop="orderStatus" />
        <el-table-column
          label="采购完结未交付数"
          align="center"
          prop="purUnDeliveryQuantity"
        />
        <el-table-column
          label="未完结待入库数量"
          align="center"
          prop="unFinishUnReceivedQuantity"
        />
        <el-table-column
          label="超入库数量"
          align="center"
          prop="overOrderReceivedQuantity"
        />
        <el-table-column
          label="是否有交货差异"
          align="center"
          prop="isOverOrder"
        />
        <el-table-column
          label="差异数量"
          align="center"
          prop="overOrderQuantity"
        />
        <el-table-column label="备注" align="center" prop="remarks" />
        <el-table-column label="年" align="center" prop="dataYear" />
        <el-table-column label="月" align="center" prop="dataMonth" />
      </el-table>

      <pagination
        v-show="PurchaseBasicsDwdTotal > 0"
        :total="PurchaseBasicsDwdTotal"
        :page.sync="pageReq.pageNum"
        :limit.sync="pageReq.pageSize"
        @pagination="pageList"
      />
    </el-dialog>
  </el-row>
</template>

<script >
import {
  listPurchaseBasicsDwd,
  getPurchaseBasicsDwd,
  delPurchaseBasicsDwd,
  addPurchaseBasicsDwd,
  updatePurchaseBasicsDwd,
  synData,
  selectOverdueQuantity,
} from "@/api/purchase/PurchaseBasicsDwd";
import MergeTable from "@/views/purchase/common/MergeTable.vue";
// @ts-ignore
import CountTo from "vue-count-to";
// import { reactive } from "vue";
export default {
  components: {
    // PanelGroup,
    CountTo,
    MergeTable,
    // KoiCard,
  },
  props: {
    biNumberItem: {
      type: Array,
      default: () => [],
    },
    itemData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      query: {},
      pageReq: {
        pageNum: 1,
        pageSize: 10,
      },
      PurchaseBasicsDwdList: [],
      PurchaseBasicsDwdTotal: 0,
      isOpen: false,
      cardList: [
        {
          title1: "上月支付订单",
          unit: "月",
          value1: 6600,
          title2: "总订单数量",
          value2: 7000,
        },
        {
          title1: "上月退款订单",
          unit: "月",
          value1: 400,
          title2: "退款金额",
          value2: 8000,
        },
        {
          title1: "上月利润",
          unit: "月",
          value1: 66000,
          title2: "盈利",
          value2: 6666,
        },
        {
          title1: "上月新增用户",
          unit: "月",
          value1: 66,
          title2: "上月登录用户",
          value2: 300,
        },
      ],
    };
  },
  methods: {
    handlePurchaseExport() {
      delete this.query.pageNum;
      delete this.query.pageSize;
      this.download(
        "purchase/PurchaseBasicsDwd/selectOverdueQuantityExport",
        {
          ...this.query,
        },
        `PurchaseBasicsDwd_${new Date().getTime()}.xlsx`
      );
    },
    pageList() {
      this.query = {
        ...this.query,
        ...this.pageReq,
      };
      selectOverdueQuantity(this.query).then((response) => {
        this.PurchaseBasicsDwdList = response.rows;
        this.PurchaseBasicsDwdTotal = response.total;
      });
    },
    handleSetLineChartData(type) {
      // if (!type) {
      //   this.$modal.msgError("请选择一条数据");
      //   return;
      // }
      this.query = {
        // skc: this.itemData.skc,
        // colorProperty: this.itemData.colorProperty,
        supplier: this.itemData.supplier,
        brand: this.itemData.brand,
        oneYear: this.itemData.oneYear,
        label: type,
        ...this.pageReq,
      };

      selectOverdueQuantity(this.query).then((response) => {
        this.PurchaseBasicsDwdList = response.rows;
        this.PurchaseBasicsDwdTotal = response.total;
      });
      this.isOpen = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
}
.card-panel-text {
  line-height: 18px;
  // color: rgba(0, 0, 0, 0.45);
  font-size: 20px;
  margin-bottom: 12px;
}

.card-panel-num {
  font-size: 20px;
  font-weight: 600;
}
.text {
  // color: rgba(0, 0, 0, 0.45);
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
.rounded-md {
  border-color: #409eff;
}
</style>
/** 超入库sku件数 */private Integer overOrderReceivedQuantity;
/** 交货逾期待交付数 */private Integer overdueUnDeliveryQuantity;
/** 采购完结未交付数 */private Integer purUnDeliveryQuantity;